<?php
use MetaPlayer\Model\SocialNetwork;
use MetaPlayer\Model\User;

/** @var $objects array */
$user = $objects['user'];
/** @var $user User */
$socialNetwork = $user->getSocialNetwork();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MetaPlayer - Alpha Version</title>
    <link rel="stylesheet" type="text/css" href="/css/mp.css">
    <link rel="stylesheet" type="text/css" href="/css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/css/blue.monday/jplayer.blue.monday.css" />

    <!-- JQuery, JQuery UI, Easy UI -->
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/js/jquery.xml2json.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.js"></script>
    <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="/js/jquery.dateFormat-1.0.js"></script>
    <script type="text/javascript" src="/js/jquery.utils.js"></script>
    <script type="text/javascript" src="/js/easyloader.js"></script>
    <script type="text/javascript" src="/js/jquery.json-2.3.js"></script>

    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>

    <!-- Social networks -->
    <?php if ($socialNetwork === SocialNetwork::$VK): ?>
    <script type="text/javascript" src="http://vk.com/js/api/xd_connection.js?2"></script>
    <script type="text/javascript" src="/js/vkutils.js"></script>
    <?php elseif ($socialNetwork === SocialNetwork::$MY): ?>
    <script type="text/javascript" src="http://cdn.connect.mail.ru/js/loader.js"></script>
    <script type="text/javascript" src="/js/myutils.js"></script>
    <?php endif; ?>

    <script type="text/javascript" src="/js/easy-ui-wrappers.js"></script>
    <script type="text/javascript" src="/js/model.js?1"></script>
    <script type="text/javascript" src="/js/repository.js?1"></script>
    <script type="text/javascript" src="/js/editor.js"></script>
    <script type="text/javascript" src="/js/messager.js"></script>
    <script type="text/javascript" src="/js/utils.js"></script>

    <script type="text/javascript" src="/js/player.js"></script>
    <script type="text/javascript" src="/js/association.js?1"></script>
    <script type="text/javascript" src="/js/search.js?1"></script>
    <script type="text/javascript" src="/js/tree.js?1"></script>
    <script type="text/javascript" src="/js/catalogue.js"></script>
    <script type="text/javascript" src="/js/TreePlayer.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            mainPlayer.init();
            mainTree.init();
            catalogue.init();
            associationManager.init();
        });
    </script>
</head>
<body>
<div id="mainHeader">
    <?php if ($user->isAdmin()): ?>
    <a href="/admin/index">Adminka!</a>
    <?php endif; ?>
</div>

<div id="mainBody" class="easyui-layout" style="width: 650px; height: 540px;">
    <div id="bodyPlayer" region="center" title="Плеер">
        <div id="mainPlayer" class="jp-jplayer"></div>
        <div id="jp_container_1" class="jp-audio" style="margin: auto">
            <div class="jp-type-playlist">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-time-holder">
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                        <!--                                <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                        </ul>-->
                    </div>
                </div>
                <div class="jp-title">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
    </div>
    <div id="bodyTree" region="south" title="Каталог" split="true" style="height: 422px;">
        <div id="bodyAccordion" class="easyui-accordion" style="height: 389px;">
            <div id="treeAccordion" selected="true" title="MetaTree">
                <table id="metaTree"
                       class="easyui-treegrid"
                       nowrap="true" rownumbers="false" animate="true" singleSelect="false"
                       idField="id" treeField="name">
                </table>
            </div>
            <div id="editTreeAccordion" title="MusicBrainz">
                <div id="search">
                    Исполнитель: <input id="searchArtist" class="easyui-validatebox" value="" onkeypress="event.keyCode == 13 ? $('#searchBtn').click() : true;">
                    <a id="searchBtn" href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch();">Поиск</a>
                    <span id="statusBar"></span>
                </div>
                <table id="catalogue" treeField="name" animate="true" idField="id" toolbar="#search" method="get">
                    <thead>
                    <tr>
                        <th field="name" width="260">Название</th>
                        <th field="type" width="80">Тип</th>
                        <th field="date" width="80">Дата</th>
                        <th field="country" width="80">Страна</th>
                        <th field="length" width="80" formatter="durationFormatter">Длит.</th>
                    </tr>
                    </thead>
                </table>
                <div style="display: none;">
                    <div id="contextMenuBand" class="easyui-menu" style="width:120px;">
                        <div onclick="addArtist($(this).parent().data('row'));"><b>Добавить только</b></div>
                        <div class="menu-sep"></div>
                        <div onclick="showDetails($(this).parent().data('row'));">Детали</div>
                    </div>
                    <div id="contextMenuAlbum" class="easyui-menu" style="width:120px;">
                        <div onclick="addAlbum($(this).parent().data('row'), true);"><b>Добавить</b></div>
                        <div onclick="addAlbum($(this).parent().data('row'), false);">Добавить только</div>
                        <div class="menu-sep"></div>
                        <div onclick="showDetails($(this).parent().data('row'));">Детали</div>
                    </div>
                    <div id="contextMenuTrack" class="easyui-menu" style="width:120px;">
                        <div onclick="addTrack($(this).parent().data('row'));"><b>Добавить</b></div>
                        <div onclick="addAlbum(true);">Добавить альбом</div>
                        <div class="menu-sep"></div>
                        <div onclick="showDetails();">Детали</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="treeMenu" class="easyui-menu" style="width:120px;">
            <div onclick="mainTree.playNode()"><b>Проигрывать</b></div>
            <div id="treeMenuShowLyrics" iconCls="icon-tip" onclick="mainTree.showLyrics()">Текст</div>
            <div class="menu-sep"></div>
            <div>
                <span>Поделиться</span>
                <div style="width: 120px">
                    <div onclick="mainTree.shareNode()">На стену</div>
                    <div onclick="mainTree.postNode()">Другу</div>
                </div>
            </div>
            <div id="treeMenuPostAudio">Опубликовать</div>
            <div class="menu-sep"></div>
            <div id="treeMenuEdit">
                <span>Править</span>
                <div style="width: 120px">
                    <div iconCls="icon-edit" onclick="mainTree.editMenuNode()">Править</div>
                    <div class="menu-sep"></div>
                    <div iconCls="icon-remove" onclick="mainTree.removeMenuNode()">Удалить</div>
                </div>
            </div>
            <div iconCls="icon-reload" onclick="mainTree.reloadMenuNode()">Перегрузить</div>
            <div onclick="mainTree.refreshMenuNode()">Обновить</div>
        </div>
        <div id="associationWindow" title="Associations"
             collapsible="false" minimizable="false" maximizable="false">
            Select new association:
            <table id="associations" url="/association/list" idField="id" pagination="true" singleSelect="true">
                <thead>
                <tr>
                    <th field="artist" width="120">Artist</th>
                    <th field="title" width="120">Title</th>
                    <th field="duration" width="40">Duration</th>
                    <th field="popularity" width="40">Popularity</th>
                    <th field="lyrics" width="40">Lyrics</th>
                    <th field="status" width="60">Status</th>
                </tr>
                </thead>
            </table>
            <table width="100%">
                <tr>
                    <td width="60%">&nbsp;</td>
                    <td width="20%"><a href="#" iconCls="icon-ok" class="easyui-linkbutton" onclick="associationOk();">OK</a></td>
                    <td width="20%"><a href="#" iconCls="icon-cancel" class="easyui-linkbutton" onclick="associationCancel()">Cancel</a></td>
                </tr>
            </table>
        </div>
        <div id="showLyricsWindow" title="Lyrics">
            <pre id="lyrics"></pre>
        </div>
    </div>
</div>

<?php if ($socialNetwork == SocialNetwork::$VK): ?>

<div id="vk_comments"></div>
<div id="vk_groups"></div>

<?php endif; ?>


<div id="mainFooter" style="float: left; width: 650px; font-size: 11px; font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';text-align: center;">
    Для реализации MetaPlayer были использованы:<br />
    <a href="http://marcelog.github.com/Ding/" target="_blank">Ding Framework</a>, special thanks to <a href="mailto://marcelog@gmail.com" target="_blank">Marcelo Gornstein</a>;
    <a href="http://www.doctrine-project.org/" target="_blank">Doctrine 2</a>;
    <a href="http://www.jeasyui.com/" target="_blank">jQuery EasyUI</a>;
    <a href="http://jplayer.org/">jPlayer</a>;
    <a href="http://musicbrainz.org" target="_blank">the catalogue MusicBrainz</a>
    <br />MetaPlayer (c) by Val Dubrava 2011-2012
    <br />
</div>
</body>
</html>
